<template>
  <div class="container">
    <!-- 卡片视图区域 -->
    <el-card>
      <h3>教师列表</h3>

      <el-table :data="courseArr" style="width: 100%" border>
        <el-table-column prop="_id" label="id" width="180"> </el-table-column>
        <!-- 课程名称 -->
        <el-table-column prop="name" label="课程名称" width="180">
          <!-- <template width="90" slot-scope="scope">
          <el-input
            type="text"
            v-model="changeStudent.name"
            v-show="scope.row.isEdit"
          />
          <span v-show="!scope.row.isEdit">{{ scope.row.name }}</span>
        </template> -->
        </el-table-column>
        <el-table-column prop="subjectsId.name" label="专业名称" width="180">
          <!-- <template width="90" slot-scope="scope">
          <el-input
            type="text"
            v-model="changeStudent.name"
            v-show="scope.row.isEdit"
          />
          <span v-show="!scope.row.isEdit">{{ scope.row.name }}</span>
        </template> -->
        </el-table-column>

        <!-- 操作 -->
        <el-table-column prop="gender" label="操作" width="200">
          <template slot-scope="scope">
            <el-button size="mini" type="danger" icon="el-icon-delete"
              @click="deleteTeacher(scope.row._id)">删除</el-button>

            <!-- <el-button size="mini" type="primary" v-show="!scope.row.isEdit"
              icon="el-icon-edit" @click="change(scope.row._id)">
              修改
            </el-button>

            <el-button size="mini" type="success" v-show="scope.row.isEdit"
              @click="upChange"><i class="el-icon-upload el-icon--right"></i>保存
            </el-button> -->
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pages">
        <el-pagination @size-change="changeSize" @current-change="currentChange"
          :current-page="queryInfo.currentPage" :page-sizes="[1, 2, 5, 10]"
          :page-size="queryInfo.pageSize"
          layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      courseArr: [],
      queryInfo: { pageSize: 5, currentPage: 1, value: "", type: "name" },
      total: 0,
    };
  },
  methods: {
    // 通过id获取课程
    getTeachers() {
      this.$api.teacherApi.getTeacher({
        ...this.queryInfo,
      })
        .then(({ data }) => {
          // console.log(data.data.rows);
          // 处理
          this.total = data.data.total;
          this.courseArr = data.data.rows
        })
    },
    deleteTeacher(_id) {
      this.$api.teacherApi.deleteTeacher(_id).then(({ data }) => {
        this.$message.success(data)
        this.getTeachers()
      })
    },
    // 每一页展示数量
    changeSize(i) {
      this.queryInfo.pageSize = i;
    },
    // 页数
    currentChange(i) {
      this.queryInfo.currentPage = i;
    },

  },
  created() {
    this.getTeachers();
  },
  watch: {
    queryInfo: {
      handler() {
        this.getTeachers();
      },
      deep: true
    }

  }
}
</script>

<style lang='scss' scoped>
.container {
  width: 810px;
}
</style>